<!DOCTYPE html><html><head> 
  <link href="../css/main.css" rel="stylesheet" type="text/css" /> 
  <script type="text/javascript" src="../MarkdownWebapp/MarkdownWebapp.nocache.js"></script> 
  <script type="text/javascript" src="../ace/ace.js"></script> 
  <link rel="icon" type="image/x-icon" href="../favicon.ico" /> 
  <script type="text/javascript">window["_GOOG_TRANS_EXT_VER"] = "1";</script> 
  <title>Cmd 向导 | 加载器 Microloader</title> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
  <script async="" type="text/javascript" src="../../../https@use.typekit.com/bqo8qzg.js"></script> 
  <script type="text/javascript">

    function showMenu(link_obj){
      var menu = document.getElementById("tpl-toc");

      link_obj.innerHTML = (link_obj.innerHTML == 'CLOSE MENU') ? 'MENU' : 'CLOSE MENU';

      if(menu.style.display == 'block'){
        menu.style.display = 'none';
      }else{
        menu.style.display = 'block';
      }
    }

  </script> 
 </head> 
 <body> 
  <div id="header"> 
   <a href="../../../www.sencha.com/default.htm"><img class="sencha-logo" src="../images/logo.png" /></a> 
   <h1 id="current-product"><a href="#">Cmd 向导 ▼</a></h1> 
   <div id="mobile_menu"> 
    <a id="mobile_menu_link" onclick="showMenu(this);" href="#">MENU</a> 
   </div> 
    
  </div> 
  <div id="content" itemscope="" itemtype="http://schema.org/Article"> 
   <div id="tpl-toc"> 
    <div id="tpl-toc-content"> 
     <a class="toggle-button" href="#">expand</a> 
     <ul> 
      <li class="file"><a href="../../default.htm" data-full-load="true" title="Home">Sencha 向导</a></li> 
      <li class="file"><a href="index.html" data-full-load="true" title="Cmd Home">Sencha Cmd 向导</a></li> 
      <li class="file"><a href="whats_new_cmd.html" title="">Cmd 6 新特性</a></li> 
      <li class="file"><a href="fashion.html" title="">欢迎使用 Fashion</a></li> 
      <li class="file"><a href="cmd_upgrade_guide.html" title="Sencha Cmd 6 - 升级向导">Sencha Cmd 6 - 升级向导</a></li> 
      <li class="file"><a href="intro_to_cmd.html" title="Sencha Cmd 介绍">Sencha Cmd 介绍</a></li> 
      <li class="file"><a href="cmd_upgrade.html" title="理解 App 升级">理解 App 升级</a></li> 
      <li class="file"><a href="cmd_compiler.html" title="对编译器友好的代码原则">对编译器友好的代码原则</a></li> 
      <li class="file"><a href="cordova_phonegap.html" title="Cordova 和 Phonegap 应用">Cordova 和 Phonegap 应用</a></li> 
      <li class="file"><a href="workspaces.html" title="Sencha Cmd 的 Workspace">Sencha Cmd 的 Workspace</a></li> 
      <li class="file"><a href="microloader.html" title="加载器 Microloader">加载器 Microloader</a></li> 
      <li class="file"><a href="resource_management.html" title="资源管理">资源管理</a><span class="tpl-toc-img-new">★</span></li> 
      <li class="file"><a href="compatibility_matrix.html" title="Sencha Cmd 兼容性列表">Sencha Cmd 兼容性列表</a><span class="tpl-toc-img-new">★</span></li> 
      <li class="folder"><a href="#">Sencha Cmd 包(Packages)</a> 
       <ul expand="false"> 
        <li class="file"><a href="cmd_packages/cmd_packages.html" title="Sencha Cmd 包(Packages)">Sencha Cmd 包(Packages)</a></li> 
        <li class="file"><a href="cmd_packages/cmd_creating_packages.html" title="创建包(Packages)">创建包(Packages)</a></li> 
       </ul></li> 
      <li class="folder"><a href="#">Sencha Cmd 进阶</a> 
       <ul expand="false"> 
        <li class="file"><a href="advanced_cmd/cmd_advanced.html" title="Sencha Cmd 进阶">Sencha Cmd 进阶</a></li> 
        <li class="file"><a href="advanced_cmd/cmd_build.html" title="App Build 过程内部机制">App Build 过程内部机制</a></li> 
        <li class="file"><a href="advanced_cmd/cmd_compiler_reference.html" title="Sencha 编译器 参考">Sencha 编译器 参考</a></li> 
        <li class="file"><a href="advanced_cmd/cmd_ant.html" title="Ant 集成">Ant 集成</a></li> 
        <li class="file"><a href="advanced_cmd/cmd_metadata.html" title="Sencha Cmd Metadata">Sencha Cmd Metadata</a></li> 
        <li class="file"><a href="advanced_cmd/cmd_reference.html" title="Sencha Cmd 参考">Sencha Cmd 参考</a></li> 
       </ul></li> 
      <li class="folder"><a href="#">Ext JS</a> 
       <ul expand="false"> 
        <li class="file"><a href="extjs/cmd_app.html" title="">Sencha Cmd 结合 Ext JS</a></li> 
       </ul></li> 
      <li class="folder"><a href="#">Sencha Touch</a> 
       <ul expand="false"> 
        <li class="file"><a href="touch/cmd_app.html" title="">Sencha Cmd 结合 Sencha Touch</a></li> 
       </ul></li> 
      <li class="file"><a href="sencha_blog.html" title="Sencha 博客">Sencha 博客</a></li> 
     </ul> 
    </div> 
   </div> 
   <div id="middle"> 
    <div id="tpl-content"> 
     <div> 
      <div class="toc-page" style="display:block;">
        Contents 
       <a class="toc-page-h2" href="#The_Manifest" title="The Manifest">The Manifest</a> 
       <a class="toc-page-h3" href="#app_json" title="app.json">app.json</a> 
       <a class="toc-page-h4" href="#Ext_manifest" title="Ext.manifest">Ext.manifest</a> 
       <a class="toc-page-h4" href="#The_script_Tag" title="The script Tag">The script Tag</a> 
       <a class="toc-page-h2" href="#Defaults_and_Customization" title="Defaults and Customization">Defaults and Customization</a> 
       <a class="toc-page-h3" href="#indexHtmlPath" title="indexHtmlPath">indexHtmlPath</a> 
       <a class="toc-page-h3" href="#framework" title="framework">framework</a> 
       <a class="toc-page-h3" href="#theme" title="theme">theme</a> 
       <a class="toc-page-h3" href="#toolkit" title="toolkit">toolkit</a> 
       <a class="toc-page-h3" href="#js" title="js">js</a> 
       <a class="toc-page-h3" href="#css" title="css">css</a> 
       <a class="toc-page-h3" href="#requires" title="requires">requires</a> 
       <a class="toc-page-h3" href="#output" title="output">output</a> 
       <a class="toc-page-h3" href="#Application_Cache" title="Application Cache">Application Cache</a> 
       <a class="toc-page-h3" href="#Local_Storage_Cache" title="Local Storage Cache">Local Storage Cache</a> 
       <a class="toc-page-h3" href="#More" title="More">More</a> 
       <a class="toc-page-h3" href="#Build_Profiles" title="Build Profiles">Build Profiles</a> 
       <a class="toc-page-h2" href="#Generating_The_Manifest" title="Generating The Manifest">Generating The Manifest</a> 
       <a class="toc-page-h2" href="#Packages" title="Packages">Packages</a> 
       <a class="toc-page-h3" href="#Load_Order" title="Load Order">Load Order</a> 
       <a class="toc-page-h2" href="#Loading_The_Manifest" title="Loading The Manifest">Loading The Manifest</a> 
       <a class="toc-page-h3" href="#Embedded_Manifest" title="Embedded Manifest">Embedded Manifest</a> 
       <a class="toc-page-h3" href="#Named_Manifest" title="Named Manifest">Named Manifest</a> 
       <a class="toc-page-h3" href="#Dynamic_Manifest" title="Dynamic Manifest">Dynamic Manifest</a> 
       <a class="toc-page-h4" href="#Platform_Detection___Responsiveness" title="Platform Detection / Responsiveness">Platform Detection / Responsiveness</a> 
       <a class="toc-page-h4" href="#Tags_specified_by_the_manifest" title="Tags specified by the manifest">Tags specified by the manifest</a> 
      </div> 
      <div id="tpl-content-name" itemprop="name"> 
       <h1>加载器 Microloader</h1> 
      </div> 
      <div id="tpl-content-articleBody" itemprop="articleBody"> 
       <p>“Microloader” is the name for Sencha’s data-driven, dynamic loader for JavaScript and CSS. 加载器 Microloader is provided by Sencha Cmd as part of your generated application. This guide will give you a solid understanding of what the Microloader does and how you can tune it for your specific requirements.</p> 
       <p>It is important to clarify that the Microloader used by Ext 6 is currently a different implementation than that used by Ext JS 5 or by Sencha Touch. The Ext JS 6 Microloader provides all of the same functionality as was provided by the Sencha Touch microloader, but has some improvements and new controls available in the <code>&quot;app.json&quot;</code> file, which are discussed further later in this document. All microloader implementations are provided by Sencha Cmd, and upgrades to the microloader will be applied by the “sencha app upgrade” process.</p> 
       <h2 id="The_Manifest">The Manifest</h2> 
       <h3 id="app_json">app.json</h3> 
       <p>This file is where you specify details about your application. This configuration file is first consumed by the Sencha Cmd build process. Sencha Cmd transforms the content of <code>&quot;app.json&quot;</code> and passes on the resulting manifest to the Microloader to use at runtime. Lastly, Ext JS itself also consults the runtime manifest for configuration options.</p> 
       <h4 id="Ext_manifest">Ext.manifest</h4> 
       <p>When you launch your application, you will find the processed content of <code>&quot;app.json&quot;</code> loaded as “Ext.manifest”. Ext JS 6 uses the Ext.manifest properties that you have specified to do things like enable the Compatibility Layer. There are various options supported by the Microloader for getting this object loaded which we’ll discuss later.</p> 
       <h4 id="The_script_Tag">The script Tag</h4> 
       <p>To use the Microloader, your page will need to contain the following script tag:</p> 
       <pre mode="javascript" theme="chrome"><code>&lt;script id=&quot;microloader&quot; data-app=&quot;12345&quot; type=&quot;text/javascript&quot; src=&quot;bootstrap.js&quot;&gt;&lt;/script&gt;</code></pre> 
       <p>By default, this script tag will be replaced by the build process but is used during development to load the application. The <em>data-app</em> atrribute should have been generated for you during app scaffold. This is a unique ID used in local storage to prevent data collision.</p> 
       <h2 id="Defaults_and_Customization">Defaults and Customization</h2> 
       <p>The <code>&quot;app.json&quot;</code> file generated by Sencha Cmd contains many properties that you may want to adjust. These properties are documented inline to explain what they each control.</p> 
       <p>If you are upgrading a project, your <code>&quot;app.json&quot;</code> may not contain all of the possible options. After performing the upgrade, the default values for any missing properties can instead be found in “.sencha/app/app.defaults.json”.</p> 
       <p>The following are the properties most often of interest.</p> 
       <h3 id="indexHtmlPath">indexHtmlPath</h3> 
       <p>This is the path to the application’s HTML document (relative to the <code>&quot;app.json&quot;</code> file). By default this property is set to “index.html”. If you server uses PHP, ASP, JSP or other technology, you can change this value to point at the proper file like so:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;indexHtmlPath&quot;: &quot;../page.jsp&quot;</code></pre> 
       <p>If you change this setting, you will likely also need to change your “output” options (see below).</p> 
       <h3 id="framework">framework</h3> 
       <p>The name of the framework; either “ext” or “touch”. For example:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;framework&quot;: &quot;ext&quot;</code></pre> 
       <h3 id="theme">theme</h3> 
       <p>For Ext JS applications, this is the name of the theme package. For example:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;theme&quot;: &quot;ext-theme-crisp&quot;</code></pre> 
       <h3 id="toolkit">toolkit</h3> 
       <p>For Ext JS 6 applications, this is the name of the toolkit package. For example:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;toolkit&quot;: &quot;classic&quot;</code></pre> 
       <h3 id="js">js</h3> 
       <p>An array of descriptions of JavaScript code files to load. By default, an Ext JS 6 application will have something like this:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;js&quot;: [{
    &quot;path&quot;: &quot;app.js&quot;,
    &quot;bundle&quot;: true
}]</code></pre> 
       <p>This entry specifies your application’s entry point. The “bundle” flag indicates that when you run “sencha app build”, this entry should be replaced by the concatenated output of the build. You can add other files to this array like so:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;js&quot;: [{
    &quot;path&quot;: &quot;library.js&quot;,
    &quot;includeInBundle&quot;: true
},{
    &quot;path&quot;: &quot;app.js&quot;,
    &quot;bundle&quot;: true
}]</code></pre> 
       <p>When you add extra files, there are some optional properties that indicate how the build process will treat them. For example, in the above case, “library.js” will be included in the concatenated build output and removed from the runtime manifest.</p> 
       <p>If instead you removed “includeInBundle”, then “library.js” would be assumed to reside in your app folder and would then be copied to the build output folder. The entry would remain in the manifest and be loaded separately by the Microloader.</p> 
       <p>To simply pass along the entry for the Microloader to load (and not be copied by the build process), add the “remote” property like so:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;js&quot;: [{
    &quot;path&quot;: &quot;library.js&quot;,
    &quot;remote&quot;: true
},{
    &quot;path&quot;: &quot;app.js&quot;,
    &quot;bundle&quot;: true
}]</code></pre> 
       <p>While you can add entries to this array, most dependencies will appear in “requires” statements in your code or in <code>&quot;app.json&quot;</code> (to require packages).</p> 
       <p><strong>Note</strong>: For Sencha Touch, you will typically have “sencha-touch-debug.js” in the “js” array. This entry is not needed for Ext JS 6 because the “framework” setting is sufficient.</p> 
       <h3 id="css">css</h3> 
       <p>Your CSS assets are handled slightly different than JavaScript. This is because in a stock Sencha Cmd application, CSS is compiled from the <code>.scss</code> source. The initial content of the “css” property looks something like this:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;css&quot;: [{
    &quot;path&quot;: &quot;boostrap.css&quot;,
    &quot;bootstrap&quot;: true
}],</code></pre> 
       <p>This CSS file is a simple stub that imports a build of your <code>&quot;sass&quot;</code> folder. The “bootstrap” flag indicates that the entry is used for development but should be removed from build output. For a build, the compiled CSS file will be appended to the “css” array of the generated manifest.</p> 
       <p>Initially, “bootstrap.css” imports the theme from the framework and looks something like this:</p> 
       <pre mode="javascript" theme="chrome"><code>@import &quot;..../ext-theme-neptune/build/ext-theme-neptune-all.css&quot;;</code></pre> 
       <p>As you build your app, this file is updated to point at the most recently built CSS file. For example if you run “sencha app build”, the production CSS file will be imported by “bootstrap.css” like so:</p> 
       <pre mode="javascript" theme="chrome"><code>@import &quot;..../build/..../app-all.css&quot;;</code></pre> 
       <p>The “css” entries also support the “remote” property. When remote is not set they operate in the same way as “js” entries in that they are copied to the build output folder.</p> 
       <h3 id="requires">requires</h3> 
       <p>This array holds names of required packages. When Sencha Cmd processes this list, it will automatically download and extract any missing packages into your workspace. Packages can likewise contain <code>requires</code> in their <code>&quot;package.json&quot;</code>. These will also be downloaded and extracted as needed.</p> 
       <p>These package names can also contain version requirements. For details on specifying version numbers, see <a href="cmd_packages/cmd_packages.html">Sencha Cmd 包(Packages)</a>.</p> 
       <h3 id="output">output</h3> 
       <p>The “output” object gives you the ability to control where and how build outputs are generated. This object can control many aspects of the build output. In our use of <code>indexHtmlPath</code> above, we told Sencha Cmd that the source for the page was <code>&quot;../page.jsp&quot;</code>. To complete this process, we use <code>output</code> to tell Sencha Cmd where the built page will reside relative to the built JavaScript and CSS. To maintain the same relative arrangement as in the source tree, we would add this to <code>&quot;app.json&quot;</code>:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;output&quot;: {
    &quot;page&quot;: {
        &quot;path&quot;: &quot;../page.jsp&quot;,
        &quot;enable&quot;: false
    },
    appCache: {
        &quot;enable&quot;: false
    },
    &quot;manifest&quot;: {
        &quot;name&quot;: &quot;bootstrap.js&quot;
    }
}</code></pre> 
       <p>In this case, we’ve also added “enable” and set it to false. This combination tells Sencha Cmd were the final page will be but also not to generate it by copying the source (as specified by “indexHtmlPage”).</p> 
       <p>Since we are not generating the page, the Microloader script tag will contain the same “src” value of “bootstrap.js”. The “manifest” option above instructs Sencha Cmd to generate the built Microloader using the same name. This is a common need for server-side template environments like JSP or ASP, but also others.</p> 
       <h3 id="Application_Cache">Application Cache</h3> 
       <p>The Application cache is a manifest used to determine what assets the browser should store for offline access. To enable this simply toggle the <code>enable</code> flag for the <code>appCache</code> property inside your output object. For example:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;output&quot;: {
    &quot;page&quot;: &quot;index.html&quot;,
    &quot;appCache&quot;: {
        &quot;enable&quot;: true
    }
}</code></pre> 
       <p>The <code>appCache</code> property seen here is used to determine if the build process will generate an Application Cache Manifest file. If this is set to true the manifest will be generated from the top level <code>appCache</code> config object in your app.json. It will look something like this:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;appCache&quot;: {
    &quot;cache&quot;: [
        &quot;index.html&quot;
    ],
    &quot;network&quot;: [
        &quot;*&quot;
    ],
    &quot;fallback&quot;: []
}</code></pre> 
       <h3 id="Local_Storage_Cache">Local Storage Cache</h3> 
       <p>The Local Storage Caching system is a seperate offline caching system from the browsers built in Application Cache. Assets are stored in Local Storage via unique keys and during bootstrap these assets will be requested first before attempting any remote loading. This allows for applications to be loaded very fast and without an internet connection. This cache also allows for delta patching of assets which means that only the changed bits of your assets, css or js, will be loaded over the network. The file will then be patched in local storage and delievered to the user. </p> 
       <p>This cache is enabled per asset via the <code>update</code> propety. This can be set to either <code>&quot;full&quot;</code> or <code>&quot;delta&quot;</code>. Below is an example of JS and CSS assets both with Local Storage Caching enabled. </p> 
       <pre mode="javascript" theme="chrome"><code>// app.js will be delta patched on updates
&quot;js&quot;: [
    {
        &quot;path&quot;: &quot;app.js&quot;,
        &quot;bundle&quot;: true,
        &quot;update&quot;: &quot;delta&quot;
    }
],

// app.css will be fully downloaded on updates
&quot;css&quot;: [
    {
        &quot;path&quot;: &quot;app.css&quot;,
        &quot;update&quot;: &quot;full&quot;
    }
]</code></pre> 
       <p>Once Local Storage Caching has been enabled on an asset one must globally enable the <code>cache</code> config <code>&quot;app.json&quot;</code>. Normally during development builds one will want this set to false and in production builds this would be set to true.</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;cache&quot;: {
    &quot;enable&quot;: false
}</code></pre> 
       <p>One can also configure the path and generation of deltas. When the <code>deltas</code> property is set to a truthy value all assets using Local Storage Caching will have detas generated into the builds <code>&quot;deltas&quot;</code> folder. If <code>deltas</code> is set to a string the value will be used as the folder name that all patch files will be saved into. The delta toggle will have no effect if <code>enable</code> is set to false.</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;cache&quot;: {
    &quot;enable&quot;: true,
    &quot;deltas&quot;: true
}</code></pre> 
       <p>Both Application Cache and Local Storage Cache will instantly load files for offline access. Because of this updated files will not be loaded into the users current application experience. Once the Microloader has detected and loaded new Application Cache or Local Storage files it will dispatch a global event allowing you to prompt the user to reload the application for the latest updates. You can listen for this event by adding the following code to your application:</p> 
       <pre mode="javascript" theme="chrome"><code>Ext.application({
name: 'MyApp',
mainView: 'MyMainView',
onAppUpdate: function () {
    Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
        function (choice) {
            if (choice === 'yes') {
                window.location.reload();
            }
        }
    );
}</code></pre> 
       <h3 id="More">More</h3> 
       <p>Many of the properties we’ve seen are instructions to the build process, while others are processed by the Microloader. As mentioned, the manifest is also understood by Ext JS as a means to configure some of its capabilities. For details on these and other properties, consult the comments in <code>&quot;app.json&quot;</code>.</p> 
       <h3 id="Build_Profiles">Build Profiles</h3> 
       <p>When an application has multiple variations, we can add a “builds” object to <code>&quot;app.json&quot;</code> to describe the desired builds like this (taken from Kitchen Sink):</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;builds&quot;: {
    &quot;classic&quot;: {
        &quot;theme&quot;: &quot;ext-theme-classic&quot;
    },
    &quot;gray&quot;: {
        &quot;theme&quot;: &quot;ext-theme-gray&quot;
    },
    &quot;access&quot;: {
        &quot;theme&quot;: &quot;ext-theme-access&quot;
    },
    &quot;crisp&quot;: {
        &quot;theme&quot;: &quot;ext-theme-crisp&quot;
    },
    &quot;neptune&quot;: {
        &quot;theme&quot;: &quot;ext-theme-neptune&quot;
    },
    &quot;neptune-touch&quot;: {
        &quot;theme&quot;: &quot;ext-theme-neptune-touch&quot;
    }
}</code></pre> 
       <p>Each key in “builds” is called a “build profile”. The value is a set of property overrides that are applied to the base content of <code>&quot;app.json&quot;</code> to produce the output manifest as described below. In this case, the “theme” property is all that is being modified for each build profile.</p> 
       <p>In addition, there are two other optional properties that are common variations for application builds: “locales” and “themes”. These are used to automate the process of producing the final build profiles. For example, Kitchen Sink uses “locales”:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;locales&quot;: [
    &quot;en&quot;,
    &quot;he&quot;
],</code></pre> 
       <p>When “locales” or “themes” are given, each of the values are combined with each of the entries in “builds” to produce the final manifests. In this case “neptune-en”, “neptune-he”, “crisp-en”, etc. are the final build profile names.</p> 
       <h2 id="Generating_The_Manifest">Generating The Manifest</h2> 
       <p>As mentioned previously, <code>&quot;app.json&quot;</code> undergoes a transformation during the build process prior to being presented at runtime as “Ext.manifest”. This process consists of merging object much like <a href="../extjs/apidocs/#!/api/Ext-method-merge" data-full-load="true">Ext.merge</a> but with a twist: when two arrays are “merged” they are concatenated.</p> 
       <p>The first step in this transformation is to merge settings for the desired build “environment” (for example, “production” or “testing”). Following this, if a build profile is being used, its contents are merged. The, if either the root or build profile specified a “toolkit” (“classic” or “modern”), that object’s properties are merged. Finally, if a packager (“cordova” or “phonegap”) is configured, its properties are merged.</p> 
       <p>In pseudo-code this would be something like this:</p> 
       <pre mode="javascript" theme="chrome"><code>var manifest = load('app.json');

// These would come from the &quot;sencha app build&quot; command:
var environment = 'production';
var buildProfile = 'native';

mergeConcat(manifest, manifest[environment]);
if (buildProfile) {
    mergeConcat(manifest, manifest.builds[buildProfile]);
}
if (manifest.toolkit) {
    mergeConcat(manifest, manifest[manifest.toolkit]);
}    
if (manifest.packager) {
    mergeConcat(manifest, manifest[manifest.packager]);
}</code></pre> 
       <h2 id="Packages">Packages</h2> 
       <p>The final step in producing the manifest is to add any required packages.</p> 
       <p>When a required package specifies “js” or “css” entries in its package.json, these are concatenated in package dependency order to the front of the arrays already produced. This allows a package to handle such dependencies itself.</p> 
       <p>In addition to “js” and “css” entries, the content of each required package’s package.json file is cleaned up slightly and added to the “packages” object in the final manifest keyed by the package name. If <code>&quot;app.json&quot;</code> already contains a “packages” object, then that object will be merged with the content of the corresponding package.json file. Priority is given to <code>&quot;app.json&quot;</code> to allow its properties to pass through as configuration options to packages (see below).</p> 
       <p>In pseudo-code, the <code>&quot;app.json&quot;</code> and package.json contents are merged like so:</p> 
       <pre mode="javascript" theme="chrome"><code>var manifest;  // from above

manifest.packages = manifest.packages || {};

var js = [], css = [];

// Expand required packages and sort in dependency order
expandAndSort(manifest.requires).forEach(function (name) {
    var pkg = load('packages/' + name + '/package.json');

    js = js.concat(pkg.js);
    css = css.concat(pkg.css);
    manifest.packages[name] = merge(pkg, manifest.packages[name]);
});

manifest.css.splice(0, 0, css);

var k = isExtJS ? 0 : manifest.js.indexOf('sencha-touch??.js');
manifest.js.splice(k, 0, js);</code></pre> 
       <p>This produces an Ext.manifest that might look like this:</p> 
       <pre mode="javascript" theme="chrome"><code>{
    &quot;name&quot;: &quot;MyApp&quot;,
    &quot;packages&quot;: {
        &quot;ext&quot;: {
            &quot;type&quot;: &quot;framework&quot;,
            &quot;version&quot;: &quot;5.0.1.1255&quot;
        },
        &quot;ext-theme-neptune&quot;: {
            &quot;type&quot;: &quot;theme&quot;,
            &quot;version&quot;: &quot;5.0.1.1255&quot;
        },
        ...
    },
    &quot;theme&quot;: &quot;ext-theme-neptune&quot;,
    &quot;js&quot;: [{
        &quot;path&quot;: &quot;app.js&quot;
    }],
    &quot;css&quot;: [{
        &quot;path&quot;: &quot;app.css&quot;
    }],
}</code></pre> 
       <p>The result of this merging means that package “foo” can provide some global options in its package.json (for example, “bar”) and set its default value. Any application that uses the foo package can configure this option like so in <code>&quot;app.json&quot;</code>:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;packages&quot;: {
    &quot;foo&quot;: {
        &quot;bar&quot;: 42
    }
}</code></pre> 
       <p>The package retrieves this value like so:</p> 
       <pre mode="javascript" theme="chrome"><code>console.log('bar: ' + Ext.manifest.packages.foo.bar);</code></pre> 
       <h3 id="Load_Order">Load Order</h3> 
       <p>One of the major differences between loading your application in development and from a build is the order in which the individual files are presented to the browser. In previous releases, your app.js file was very nearly the first file processed by the browser. As its requirements were stated, more files were loaded and their requirements discovered and so on.</p> 
       <p>In a build, however, this order is reversed. Your app.js file will be almost always the very last file in the build output. This can easily lead to situations where code works in development but fails in production - clearly an undesirable outcome.</p> 
       <p>With Ext JS 5, the load order that will be used for the build is added to the manifest and used to load files in that same order. While this makes the manifest considerably larger, it is only used during development.</p> 
       <h2 id="Loading_The_Manifest">Loading The Manifest</h2> 
       <p>加载器 Microloader will load your application as it is described in <code>&quot;app.json&quot;</code> and passed along in Ext.manifest. To do this, the Microloader must first load the manifest. There are three basic ways to accomplish this.</p> 
       <h3 id="Embedded_Manifest">Embedded Manifest</h3> 
       <p>For typical applications there is a single theme, locale and framework selection and that results in a single manifest. This manifest can be placed in the output markup file to optimize download time.</p> 
       <p>To enable this option, add the following to <code>&quot;app.json&quot;</code>:</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;output&quot;: {
    &quot;manifest&quot;: {
        &quot;embed&quot;: true
    }
}</code></pre> 
       <p>This setting will embed the manifest and the Microloader in the markup file.</p> 
       <h3 id="Named_Manifest">Named Manifest</h3> 
       <p>If you use build profiles, embedding the manifest is not an option. Instead the Microloader can request the manifest at load time given a name. By default, the generated <code>&quot;app.json&quot;</code> file is placed in the same folder as the markup file and that is the default manifest name. To specify a different name, you can do this:</p> 
       <pre mode="javascript" theme="chrome"><code>&lt;script type=&quot;text/javascript&quot;&gt;
    var Ext = Ext || {};
    Ext.manifest = 'foo';  // loads &quot;./foo.json&quot; relative to your page
&lt;/script&gt;</code></pre> 
       <p>This approach is a useful way to manage build profiles on the server side by generating the name rather than hard-coding it.</p> 
       <h3 id="Dynamic_Manifest">Dynamic Manifest</h3> 
       <p>There are times when you may want to select a build profile client-side. To simplify this, the Microloader defines a hook method called “Ext.beforeLoad”. If you define this method like the following, you can control the name or content of “Ext.manifest” prior to the Microloader processing it while leveraging its platform detection.</p> 
       <pre mode="javascript" theme="chrome"><code>&lt;script type=&quot;text/javascript&quot;&gt;
    var Ext = Ext || {};
    Ext.beforeLoad = function (tags) {
        var theme = location.href.match(/theme=([\w-]+)/),
            locale = location.href.match(/locale=([\w-]+)/);

        theme  = (theme &amp;&amp; theme[1]) || 'crisp';
        locale = (locale &amp;&amp; locale[1]) || 'en';

        Ext.manifest = theme + &quot;-&quot; + locale;
    };
&lt;/script&gt;</code></pre> 
       <p>The above is taken from the Ext JS 5 Kitchen Sink example. That example is built in several themes and 2 locales (English “en” and Hebrew “he”). By providing this method the build profile name is changed to a value like “crisp-en” which instructs the Microloader to load the “crisp-en.json” manifest as opposed to <code>&quot;app.json&quot;</code>.</p> 
       <p>The build profile selection process can be whatever is needed by your application. A server-side framework might chose to make this selection as the page is rendered. This could be based on cookies, or other personal data. In the above case, it is based purely on the URL.</p> 
       <h4 id="Platform_Detection___Responsiveness">Platform Detection / Responsiveness</h4> 
       <p>Often the device or browser is a key selection criteria, so the Microloader passes an object called “tags” to beforeLoad. This object contains as properties the various platform tags it has detected. The set of all tags are these:</p> 
       <ul> 
        <li>phone</li> 
        <li>tablet</li> 
        <li>desktop</li> 
        <li>touch</li> 
        <li>ios</li> 
        <li>android</li> 
        <li>blackberry</li> 
        <li>safari</li> 
        <li>chrome</li> 
        <li>ie10</li> 
        <li>windows</li> 
        <li>tizen</li> 
        <li>firefox</li> 
       </ul> 
       <p>The beforeLoad method can use these tags or even modify them. This object is subsequently used to control filtering of assets (js or css items described in the manifest) as well as run-time config values set by <a href="../extjs/apidocs/#!/api/Ext.Class-cfg-platformConfig" data-full-load="true">platformConfig</a>. This hook then allows you to control what these filters will match. Modifying the tags is, however, primarily intended for adding new tags that have meaning to your application. Custom tags should be prefixed by “ux-”. Sencha provided tags will not begin with this prefix.</p> 
       <h4 id="Tags_specified_by_the_manifest">Tags specified by the manifest</h4> 
       <p>The manifest also provides a “tags” property for setting the available tags. This prpoerty may be either an array of strings</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;tags&quot;: [&quot;ios&quot;, &quot;phone&quot;, &quot;fashion&quot;]</code></pre> 
       <p>or as an object literal, keyed by tag name, where the value will be the value of that tag.</p> 
       <pre mode="javascript" theme="chrome"><code>&quot;tags&quot;: {
    &quot;ios&quot;: true,
    &quot;phone&quot;: true,
    &quot;desktop&quot;: false,
    &quot;fashion&quot;: true
}</code></pre> 
       <p>When supplied, this tags will take priority over autodetected values. Since these values are supplied by the manifest, they will not be available to the “beforeLoad” method, and will overwrite any updates to the tags made by that method in the event of a tag name collision.</p> 
      </div> 
      <div class="tpl-content-lastUpdated">
        Last updated 
       <div id="tpl-content-lastUpdated-date" itemprop="datePublished" datetime="2016-04-01T13:04Z">
         April 1, 2016 
       </div> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div> 
  <div id="footer"> 
   <div id="footer-social"> 
    <div class="g-plusone" data-size="medium" data-annotation="none"></div> 
   </div> 
   <div id="footer-content"> 
    <a href="../../../www.sencha.com/products">Products</a> | 
    <a href="../../../www.sencha.com/services">Services</a> | 
    <a href="../../../www.sencha.com/support">Support</a> | 
    <a href="../../../www.sencha.com/training">Training</a> | 
    <a href="../../../www.sencha.com/partners">Partners</a> | 
    <a href="../../../www.sencha.com/blog">Community</a> | 
    <a href="../../../www.sencha.com/company">Company</a> 
   </div> 
  </div> 
  <div id="menu-product-container" style="display:none;"> 
   <div id="menu-dropdown"> 
    <div class="menu-landing-products"> 
     <div id="menu-vertical"> 
      <p class="menu-landing-product" rel="cmd"> <a> Sencha Cmd </a> </p> 
      <p class="menu-landing-product" rel="extjs"> <a> Sencha Ext JS </a> </p> 
      <p class="menu-landing-product" rel="sencha_test"> <a> Sencha Test </a> </p> 
      <p class="menu-landing-product" rel="ide_plugins"> <a> Sencha IDE Plugins </a> </p> 
      <p class="menu-landing-product" rel="sencha_inspector"> <a> Sencha Inspector </a> </p> 
      <p class="menu-landing-product" rel="gxt"> <a> Sencha GXT </a> </p> 
      <p class="menu-landing-product" rel="webappmgr"> <a> Sencha Web Application Manager </a> </p> 
      <p class="menu-landing-product" rel="architect"> <a> Sencha Architect </a> </p> 
      <p class="menu-landing-product" rel="touch"> <a> Sencha Touch </a> </p> 
     </div> 
    </div> 
    <div id="menu-product-details"> 
     <div id="cmd-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha Cmd 
      </div> 
      <div class="menu-landing-doc-heading">
        6.x 
      </div> 
      <a href="../6.x"> 6.x </a> 
      <span class="tpl-toc-img-new">★</span> 
      <br /> 
      <div class="menu-landing-doc-heading">
        5.x 
      </div> 
      <a href="../5.x"> 5.x </a> 
     </div> 
     <div id="extjs-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha Ext JS 
      </div> 
      <div class="menu-landing-doc-heading">
        6.x 
      </div> 
      <a href="../../extjs/6.0/default.htm"> 6.0.2 </a> 
      <a class="menu-landing-zip" style="padding-right:0;" href="../../downloads/extjs-docs-6.0.2-classic.zip"> (classic) </a> 
      <a class="menu-landing-zip menu-landing-lesspad" href="../../downloads/extjs-docs-6.0.2-modern.zip"> (modern) </a> 
      <span class="tpl-toc-img-new">★</span> 
      <br /> 
      <a href="../../extjs/6.0/default.htm"> 6.0.1 </a> 
      <a class="menu-landing-zip" style="padding-right:0;" href="../../downloads/extjs-docs-6.0.1-classic.zip"> (classic) </a> 
      <a class="menu-landing-zip menu-landing-lesspad" href="../../downloads/extjs-docs-6.0.1-modern.zip"> (modern) </a> 
      <span class="tpl-toc-img-new">★</span> 
      <br /> 
      <a href="../../extjs/6.0/default.htm"> 6.0.0 </a> 
      <a class="menu-landing-zip" style="padding-right:0;" href="../../downloads/extjs-docs-6.0.0-classic.zip"> (classic) </a> 
      <a class="menu-landing-zip" style="padding-left:0;" href="../../downloads/extjs-docs-6.0.0-modern.zip"> (modern) </a> 
      <div class="menu-landing-doc-heading">
        5.1.x 
      </div> 
      <a href="../../extjs/5.1/default.htm"> 5.1.2 </a> 
      <a class="menu-landing-zip" href="../../downloads/extjs-docs-5.1.2.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/5.1/default.htm"> 5.1.1 </a> 
      <a class="menu-landing-zip" href="../../downloads/extjs-docs-5.1.1.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/5.1/default.htm"> 5.1.0 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/ext-docs-5.1.0.zip"> (offline docs) </a> 
      <br /> 
      <div class="menu-landing-doc-heading">
        5.0.x 
      </div> 
      <a href="../../extjs/5.0/default.htm"> 5.0.1 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/ext-docs-5.0.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/5.0/default.htm"> 5.0.0 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/ext-docs-5.0.0.zip"> (offline docs) </a> 
      <br /> 
      <div class="menu-landing-doc-heading">
        4.2.x 
      </div> 
      <a href="../../extjs/4.2.5/default.htm"> 4.2.5 </a> 
      <a class="menu-landing-zip" href="../../downloads/extjs-docs-4.2.5.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/4.2.4/default.htm"> 4.2.4 </a> 
      <a class="menu-landing-zip" href="../../downloads/extjs-docs-4.2.4.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/4.2.3/default.htm"> 4.2.3 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/extjs-docs-4.2.3.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/4.2.2/default.htm"> 4.2.2 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/extjs-docs-4.2.2.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/4.2.1/default.htm"> 4.2.1 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/extjs-docs-4.2.1.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/4.2.0/default.htm"> 4.2.0 </a> 
      <br /> 
      <div class="menu-landing-doc-heading">
        4.1.x 
      </div> 
      <a href="../../extjs/4.1.3/default.htm"> 4.1.3 </a> 
      <br /> 
      <a href="../../extjs/4.1.2/default.htm"> 4.1.2 </a> 
      <br /> 
      <a href="../../extjs/4.1.1/default.htm"> 4.1.1 </a> 
      <br /> 
      <a href="../../extjs/4.1.0/default.htm"> 4.1.0 </a> 
      <br /> 
      <div class="menu-landing-doc-heading">
        4.0.x 
      </div> 
      <a href="../../extjs/4.0.7/default.htm"> 4.0.7 </a> 
      <br /> 
      <a href="../../extjs/4.0.0/default.htm"> 4.0.0 </a> 
     </div> 
     <div id="sencha_test-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha Test 
      </div> 
      <a href="../../sencha_test/index.html"> Sencha Test </a> 
      <span class="tpl-toc-img-new">★</span> 
     </div> 
     <div id="ide_plugins-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha IDE Plugins 
      </div> 
      <a href="../../ide_plugins/jetbrains_ide_plugin.html"> JetBrains Plugin 6.x </a> 
      <span class="tpl-toc-img-new">★</span> 
      <br /> 
      <a href="../../ide_plugins/eclipse_ide_plugin.html"> Eclipse Plugin </a> 
      <span class="tpl-toc-img-new">★</span> 
      <br /> 
      <a href="../../ide_plugins/visual_studio_ide_plugin.html"> Visual Studio Plugin </a> 
      <span class="tpl-toc-img-new">★</span> 
     </div> 
     <div id="sencha_inspector-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha Inspector 
      </div> 
      <a href="../../sencha_inspector/index.html"> Sencha Inspector 6.x </a> 
      <span class="tpl-toc-img-new">★</span> 
     </div> 
     <div id="gxt-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha GXT 
      </div> 
      <!-- GXT 4.0 --> 
      <div class="menu-landing-doc-heading">
        4.0 
       <span class="tpl-toc-img-new">★</span> 
      </div> 
      <a href="../../../examples.sencha.com/gxt/4.0.1"> 4.0 Explorer Examples </a> 
      <br /> 
      <a href="../../../examples.sencha.com/gxt-edash/4.0.1"> 4.0 Dashboard Example </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/gxt/examples-src/gxt-edash-4.0.1.zip"> (War) </a> 
      <br /> 
      <a href="../../gxt/4.x/default.htm"> 4.0 Guides </a> 
      <br /> 
      <a href="../../gxt/4.x/javadoc/gxt-4.0.0"> 4.0 Javadoc </a> 
      <br /> 
      <!-- GXT 3.1.x --> 
      <div class="menu-landing-doc-heading">
        3.1 
      </div> 
      <a href="../../../www.sencha.com/examples/default.htm"> 3.1.4 Examples </a> 
      <br /> 
      <a href="../../gxt/3.x/default.htm"> 3.1.4 Guides </a> 
      <br /> 
      <a href="../../gxt/3.x/javadoc"> 3.1.4 Javadoc </a> 
      <br /> 
      <!-- GXT 3.0.x --> 
      <!-- GXT 2.x --> 
      <div class="menu-landing-doc-heading">
        2.0 
      </div> 
      <a href="../../../https@www.sencha.com/examples-2/default.htm"> 2.3.1 Examples </a> 
     </div> 
     <div id="webappmgr-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha Web Application Manager 
      </div> 
      <div class="menu-landing-doc-heading">
        6.0.x 
      </div> 
      <a href="../../webappmgr"> 6.0.0 </a> 
      <span class="tpl-toc-img-new">★</span> 
     </div> 
     <div id="architect-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha Architect 
      </div> 
      <div class="menu-landing-doc-heading">
        3.x 
      </div> 
      <a href="../../architect/3.5/default.htm"> 3.5 </a> 
      <span class="tpl-toc-img-new">★</span> 
      <br /> 
      <a href="../../architect/3/default.htm"> 3.2 </a> 
      <a class="menu-landing-zip menu-landing-lesspad" href="../../../cdn.sencha.com/downloads/docs/architect-docs-3.zip"> (offline docs) </a> 
     </div> 
     <div id="touch-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha Touch 
      </div> 
      <div class="menu-landing-doc-heading">
        2.4.x 
      </div> 
      <a href="../../touch/2.4/default.htm"> 2.4.2 </a> 
      <span class="tpl-toc-img-new">★</span> 
      <a class="menu-landing-zip menu-landing-lesspad" href="../../downloads/touch-docs-2.4.2.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../touch/2.4/default.htm"> 2.4.1 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/touch-docs-2.4.1.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../touch/2.4/2.4.0-apidocs"> 2.4.0 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/touch-docs-2.4.0.zip"> (offline docs) </a> 
      <div class="menu-landing-doc-heading">
        2.3.x 
      </div> 
      <a href="../../touch/2.3.1/default.htm"> 2.3.1 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/touch-docs-2.3.1.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../touch/2.3.0/default.htm"> 2.3.0 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/touch-docs-2.3.0.zip"> (offline docs) </a> 
      <br /> 
      <div class="menu-landing-doc-heading">
        2.2.x 
      </div> 
      <a href="../../touch/2.2.1/default.htm"> 2.2.1 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/touch-docs-2.2.1.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../touch/2.2.0/default.htm"> 2.2.0 </a> 
      <br /> 
      <div class="menu-landing-doc-heading">
        2.1.x 
      </div> 
      <a href="../../touch/2.1.1/default.htm"> 2.1.1 </a> 
      <br /> 
      <a href="../../touch/2.1.0/default.htm"> 2.1.0 </a> 
      <br /> 
      <div class="menu-landing-doc-heading">
        2.0.x 
      </div> 
      <a href="../../touch/2.0.2/default.htm"> 2.0.2 </a> 
      <br /> 
      <a href="../../touch/2.0.1/default.htm"> 2.0.1 </a> 
      <br /> 
      <a href="../../touch/2.0.0/default.htm"> 2.0.0 </a> 
     </div> 
    </div> 
   </div> 
  </div> 
   
  <script type="text/javascript">
    adroll_adv_id = "5RM2BL5IGRFLRG5VDQ7OIE";
    adroll_pix_id = "LWO7UZXBFVESTOMYFI2LYS";
    /* OPTIONAL: provide email to improve user identification */
    /* adroll_email = "username_40example.com"; */
    (function () {
      var _onload = function(){
        if (document.readyState && !/loaded|complete/.test(document.readyState)){setTimeout(_onload, 10);return}
        if (!window.__adroll_loaded){__adroll_loaded=true;setTimeout(_onload, 50);return}
        var scr = document.createElement("script");
        var host = (("https:" == document.location.protocol) ? "../../../https@s.adroll.com" : "../../../a.adroll.com");
        scr.setAttribute('async', 'true');
        scr.type = "text/javascript";
        scr.src = host + "/j/roundtrip.js";
        ((document.getElementsByTagName('head') || [null])[0] ||
        document.getElementsByTagName('script')[0].parentNode).appendChild(scr);
      };
      if (window.addEventListener) {window.addEventListener('load', _onload, false);}
      else {window.attachEvent('onload', _onload)}
    }());
  </script> 
  <script>
    var menu = document.getElementById("tpl-toc"),
        link_obj = document.getElementById("mobile_menu_link"),
        links = menu.querySelectorAll('a');

    for(i=0; i < links.length; i++) {
      links[i].onclick = function() {
        var mq = window.matchMedia('only screen and (max-width: 768px)');

        if(mq.matches) {
          menu.style.display = 'none';
          link_obj.innerHTML = 'MENU';
        }
      }
    }
  </script> 
  <script type="text/javascript">
    </script>              <script src='../../../munchkin.marketo.net/munchkin-beta.js' type='text/javascript'></script><script>Munchkin.init('374-WES-121');</script>   
 
</body></html>